<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                <el-breadcrumb-item>公告管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
<!--    分割线-->
    <div class="line" />

    <el-row>
<!--        发布框-->
        <el-col :span="12">
            <span style="font-weight: bold;font-size: 14px;margin-left: 5px">发布公告</span>
            <el-input style="width: 95%;" type="textarea"
                      placeholder="请输入内容" maxlength="50"
                      show-word-limit v-model="announcement"
                      :autosize="{ minRows: 10, maxRows: 20 }"
                      @input="handleInput"
            ></el-input>
            <div v-if="sensitiveWordsDetected" class="error-message">输入有敏感词，请修改</div>
            <el-button style="margin-left: 645px;margin-top: 5px" @click="btnPubClick">发布</el-button>

        </el-col>
<!--        公告表格-->
        <el-col :span="12">
            <span style="font-weight: bold;font-size: 14px;margin-left: 5px">历史公告</span>
            <el-table :data="announcementList" stripe border style="width: 99%">
                <el-table-column type="index" label="序号" align="center" width="60px"/>
                <el-table-column prop="acontent" label="公告内容" align="center"/>
                <el-table-column prop="atime" label="发布时间" align="center" :formatter="FormatTime"/>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" @click="btnEditClick(scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="您确认要删除此条公告吗？"
                                @confirm="btnDeleteClick(scope.row)"
                        >
                            <template #reference>
                                <el-button type="text">
                                    <i class="fa fa-trash"></i>
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!--        逻辑分页-->
            <el-config-provider>
                <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-config-provider>
        </el-col>
    </el-row>
<!--    修改公告弹窗-->
  <el-dialog v-model="info.show">
      <template #header>
          修改评论
      </template>
      <el-input style="width: 95%;" type="textarea"
                placeholder="请输入内容" maxlength="50"
                show-word-limit v-model="info.announcement"
                :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
      <el-button style="margin-left: 645px;margin-top: 5px" @click="btnSummitClick">提交</el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
import moment from "moment/moment.js";
import {ElMessage} from "element-plus";

export default {
    name: "Announcement",
    data(){
        return{
            announcementList:[],//公告列表
            announcement:'', //滚动公告
            sensitiveWords:['死','台独','风水','鬼',], //敏感词列表
            sensitiveWordsDetected:false,
            name:'', //管理员姓名
            info:{
                show:false,
                id:0,
                announcement:''
            }, //弹窗参数
            page: {
             currentPage: 1, //当前页码，初始页码为1
                 totalCount: 2, //总数居条数，根据接口获取数据长度
                 pageSize: 5, //每页显示的条数
                 allTableData: [] //全部表格数据
            },
        }
    },
    methods:{
        //获取公告数据
        initTable() {
            this.name=sessionStorage.getItem('name');//获取登录姓名
            if(this.name==null){ //判断是否登录
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else {
                ElMessage.success({
                    message:'欢迎登录智慧食堂管理系统',
                    duration:1000
                });
                axios({
                    url: 'http://localhost:8888/announcement/getAnnouncementList',
                    method: 'get',
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //发布评论
        btnPubClick(){
            if(this.name==null){ //判断是否登录
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else if(this.sensitiveWordsDetected){
                ElMessage.warning({
                    message:'请修改敏感词后再进行发布',
                    duration:1000
                });
            }else {
                axios({
                    url: 'http://localhost:8888/announcement/insertAnnouncement',
                    method: 'post',
                    params:{
                        aContent:this.announcement
                    }
                }).then((res) => {
                    if(res.data.success) {
                        ElMessage.success({
                            message:'发布成功',
                            duration:1000
                        })
                        this.initTable();
                    }
                })
            }
        },
        //修改评论
        btnEditClick(row){
            this.info.show=true;
            this.info.announcement=row.acontent;
            this.info.id=row.id
        },
        //确认修改
        btnSummitClick(){
            axios({
                url: 'http://localhost:8888/announcement/updateAnnouncement',
                method: 'post',
                params:{
                    id:this.info.id,
                    aContent:this.info.announcement
                }
            }).then((res) => {
                if(res.data.success) {
                    ElMessage.success({
                        message:'修改成功',
                        duration:1000
                    })
                    this.info.show=false;
                    this.initTable();
                }
            })
        },
        //删除评论
        btnDeleteClick(row){
            axios({
                url: 'http://localhost:8888/announcement/deleteAnnouncement',
                method: 'post',
                params:{
                    id:row.id
                }
            }).then((res) => {
                if(res.data.success) {
                    ElMessage.success({
                        message:'删除成功',
                        duration:1000
                    })
                    this.initTable();
                }
            })
        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.announcementList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.announcementList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
        },
        //规定时间形式
        FormatTime(row, column) {
            var date = row[column.property];
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
        //检测敏感词
        handleInput(value) {
            // 检查输入值是否包含敏感词
            const hasSensitiveWord = this.sensitiveWords.some(word => value.includes(word));

            if (hasSensitiveWord) {
                // 如果包含敏感词，可以选择阻止输入（这里只是给出提示）
                this.sensitiveWordsDetected = true;
                // 可以在这里处理，比如替换敏感词或清空输入框
                // 注意：直接修改inputValue可能会导致用户体验问题，特别是光标位置变化
                // 一种替代方案是显示错误消息，并让用户自己修改

                // 例如，清空输入框（不推荐，除非用户明确同意）
                // this.inputValue = value.replace(new RegExp(this.sensitiveWords.join('|'), 'gi'), '*');

                // 或者，只是简单地阻止后续输入（这里只是示例，实际上无法直接阻止）
                // 更合理的做法是让用户知道输入了敏感词，并让他们自己修改

                // 如果只是想要提示并保留输入（但用户需要手动修改），则不需要修改inputValue
            } else {
                // 如果没有敏感词，则重置错误提示
                this.sensitiveWordsDetected = false;
            }

            // 注意：这里并没有直接阻止敏感词的输入，因为Vue的v-model是双向绑定的，
            // 直接修改inputValue可能会导致用户体验问题。更好的做法是使用表单验证或用户输入后进行检查。
        },
    },
    mounted() {
        this.initTable();
    }
}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}
/* 横线 */
.line{
    float:right;
    width: 100%;
    height: 1px;
    margin-top: -0.5em;
    background:#d4c4c4;
    position: relative;
    text-align: center;
}

.error-message {
    font-weight: bold;
    font-size: 12px;
    color: red;
    margin-top: 5px;
}
</style>